<template>
  <div class="black-list" v-loading="loading">
    <div class="input-box">
        <el-input
            placeholder="搜索趣ID、QQ号、身份证号、手机号、微信"
            @keyup.enter.native="selectChange"
            style="width:340px;"
            clearable
            v-model.trim="keyWord">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>


        <!-- <span class="input-title">类型</span>
        <el-select v-model="modeType" placeholder="请选择" @change="modeStatusChange">
          <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
        <span class="input-title">状态</span>
        <el-select v-model="statusType" placeholder="请选择" @change="statusChange">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="input-title">封禁权限</span>
        <el-select v-model="bandType" placeholder="请选择" @change="bandChange">
          <el-option
            v-for="item in bandOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="add-black-btn" style="display: inline-block; margin-left: 20px">
          <AddBlackName :sourceType="0" @updateList="getList"/>
        </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" ref="table" border style="width: 100%">
          <el-table-column width="100" label="类型">
            <template slot-scope="scope">
              <div v-show="scope.row.type === 1">QQ号</div>
              <div v-show="scope.row.type === 2">身份证号</div>
              <div v-show="scope.row.type === 3">手机号</div>
              <div v-show="scope.row.type === 4">趣ID</div>
              <div v-show="scope.row.type === 5">微信号</div>
            </template>
          </el-table-column>
          <el-table-column label="号码">
            <template slot-scope="scope">
              <div :class="{'table-btn': scope.row.type === 4}" @click="goUserDetail(scope.row)">{{ scope.row.number || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column 
            label="关联信息"
            width="180"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.aboutInfoSaveList && scope.row.aboutInfoSaveList.length > 0">
                <!-- 如果是 选的是趣ID -->
                <div v-for="(item, index) in  scope.row.aboutInfoSaveList" :key="index">
                  <!-- <div v-if="item.values">{{ item.key }}: <span :class="{'table-btn': scope.row.type === 4}" @click="goUserDetail(scope.row)">{{ item.values.join('、') || '-'}}</span></div> -->
                  <div>
                    <span>{{ item.key }}：</span> 
                    <span :class="{'table-btn': item.key.includes('趣')}" @click="goUserDetail(it, item.key)" v-for="(it, index) in item.values" :key="index">{{ it || '-'}}、</span>
                    <span v-if="item.values && item.values.length === 0">无</span>
                  </div>
                </div>
              </div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column label="封禁权限">
            <template slot-scope="scope">
              <div v-if="scope.row.tradeAccountBlackLimitList.length">
                <div v-for="(item, index) in scope.row.tradeAccountBlackLimitList" :key="index">
                  <span v-if="item.status">{{ item.name }}</span>
                </div>
              </div>
              <div v-else style="text-align: center;">-</div>
            </template>
          </el-table-column>
          <el-table-column label="处罚时长">
            <template slot-scope="scope">
              <div>
                <span>{{ _formatDate(scope.row.startTime) }}</span>
                 至 
                <span v-if="((scope.row.endTime - scope.row.startTime) / oneDayTime) < 100">{{ _formatDate(scope.row.endTime) }}</span>
                <span v-else>永久</span>
              </div>
              <!-- <div>{{ _formatDate(scope.row.startTime) }} 至 {{ _formatDate(scope.row.endTime) }}</div> -->
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="处罚原因"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div v-show="scope.row.status === 0">
                <p>已解除</p>
                <p>{{ scope.row.statusUpdatedesc }}</p>
              </div>
              <div v-show="scope.row.status === 1" style="color: red;">处罚中</div>
              <div v-show="scope.row.status === 2">已到期</div>
            </template>
          </el-table-column>
          <el-table-column label="操作者">
            <template slot-scope="scope">
              <div>{{ scope.row.adminUserName || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <div>
                      <el-button v-if="scope.row.status === 1" type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="unsealFlag(scope)">解除</el-button>
                  </div>
              </template>
          </el-table-column>
      </el-table>
    </div>

    <div class="tools" style="margin-top: 20px;">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog
        class="dialog-box"
        title="解除处罚"
        :visible.sync="cancelChuFa"
        width="400px">
        <div class="cancel-list">
          <div class="title">封禁信息：</div>
          <div class="content" v-if="cancelMessage.length > 0">
            <div v-for="(item, idx) in cancelMessage" :key="idx">
              <span>{{ item.key }}：</span>
              <span v-for="(it, index) in item.values" :key="index">{{ it }}、</span>
            </div>
          </div>
          <div v-else>无</div>
        </div>
        <div class="cancel-list">
          <div class="title">封禁权限：</div>
          <div class="content">{{ cancelPword }}</div>
        </div>
        <div class="tip">注：解除封禁则以上信息都会被解封，请谨慎</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="unseal">提交</el-button>
            <el-button @click="cancelChuFa = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'

export default {
  data () {
    return {
      loading: false,
      keyWord: '',
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 12,
      QQnumber: '',
      idCard: '',
      phone: '',
      dialogType: 0,
      accountStatus: null,
        editObj: null,
        Qunumber: '',
        modeType: null,
        modeOptions: [
          {
            value: 4,
            label: '趣ID'
          },
          {
            value: 1,
            label: 'QQ号'
          },
          {
            value: 2,
            label: '身份证号'
          },
          {
            value: 3,
            label: '手机号'
          },
          {
            value: 5,
            label: '微信号'
          }
        ],
        statusType: null,
        statusOptions: [
          {
            value: null,
            label: '全部'
          },
          {
            value: 1,
            label: '处罚中'
          },
          {
            value: 0,
            label: '已解除'
          },
          {
            value: 2,
            label: '已到期'
          }
        ],
        bandType: null,
        bandOptions: [
          {
            value: null,
            label: '全部'
          },
          {
            value: 1,
            label: '禁止出售'
          },
          {
            value: 2,
            label: '禁止出租'
          },
          {
            value: 3,
            label: '禁止买号'
          },
          {
            value: 4,
            label: '禁止租号'
          },
          {
            value: 5,
            label: '完全封禁'
          },
          {
            value: 6,
            label: '冻结钱包'
          }
        ],
        cancelChuFa: false,
        cancelId: null,
        cancelMessage: [],
        cancelPword: '',
        radioVal: 4,
        oneDayTime: 3600 * 1000 * 24 * 365
    }
  },
  mounted () {
    this.getList(1)
  },
  methods: {
    goUserDetail (item, key) {
      if (typeof item !== 'string' && item.type !== 4) return
      if (key && !key.includes('趣')) return
      const { href } = this.$router.resolve({
          path: `/dataReport/userInfo`,
          query: {
              id: item.number || item
          }
      })
      window.open(href, '_blank')
    },
    modeStatusChange (type) {
      this.modeType = type
      this.getList(1)
    },
    statusChange (type) {
      this.statusType = type
      this.getList(1)
    },
    bandChange (type) {
      this.banType = type
      this.getList(1)
    },
    goOrderDetail (orderId) {
      if (orderId !== '0') {
        this.$router.push({ path: '/seller/tradOrderDetail', query: { orderId: orderId } })
      }
    },
    unsealFlag (scope) {
      let pwordArr = []
      this.cancelId = scope.row.id
      this.cancelMessage = scope.row.aboutInfoSaveList
      scope.row.tradeAccountBlackLimitList.forEach((item) => {
        pwordArr.push(item.name)
      })
      this.cancelPword = pwordArr.join('、')
      this.cancelChuFa = true
    },
    // 解封封禁
    unseal () {
      if (!this.cancelId) return
      let params = {
        id: this.cancelId,
        status: 0
      }
      this.$http.post('/black/updateTradeAccountBlackStatus', params).then((res) => {
        if (res.code === '0') {
          this.$message({
              type: 'success',
              message: '解除成功'
          })
          this.getList()
          this.cancelChuFa = false
        } else {
            this.cancelChuFa = false
            this.$message({
                type: 'error',
                message: res.desc
            })
        }
      })
    },
    resetParam () {
      this.modeType = null
      this.statusType = null
      this.bandType = null
      this.keyWord = ''
    },
    async getList (pageNum, flag, radioVal) {
      // 如果是设置黑名单 刷新则需要 重置列表筛选参数
      if (radioVal) this.radioVal = radioVal
      if (flag) this.resetParam()
      if (this.loading) return
      if (pageNum) {
        this.pageNum = pageNum
      }
      this.loading = true
      let params = {
          pageNum: pageNum || this.pageNum,
          pageSize: this.pageSize,
          type: this.modeType,
          status: this.statusType,
          limitQuery: this.bandType
      }
      if (this.keyWord) params.keyWord = this.keyWord
      let res = await this.$http.get('/black/getList', {
          params
      })
      if (res.code === '0') {
          this.tableData = res.data
          this.total = res.count
      } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
      }
      this.loading = false
    },
    // 搜索
    selectChange () {
      this.getList(1)
    },
    // 页码切换
    sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList(1)
    },
    // 页容切换
    pageChange (val) {
        this.pageNum = val
        this.getList(this.pageNum)
    },
    _formatDate (timestamp) {
        return formatDate(timestamp, 'YYYY.MM.DD')
    }
  }
}
</script>
<style lang="scss" scoped>
.add-black-btn {
  position: fixed;
  top: 60px;
  right: 30px;
  z-index: 2000;
}
.cancel-list {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  .title {
    min-width: 80px;
    margin-right: 10px;
  }
}
.tip {
  color: red;
  margin-top: 20px;
}
.table-box{
  margin-top: 20px;
  .ganda{
    display: flex;
    .ganda-pic{
      width: 80px;
      margin: 0 5px;
      img{
        width: 100%;
      }
    }
  }
}
.input-box {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    .input-title {
        margin: 0 10px 0 20px;
    }
    .btn {
        margin-top: 10px;
        margin-left: 10px;
    }
}
.table-btn {
    cursor: pointer;
    color: #409EFF;
    font-size: 13px;
    font-weight: 500;
    &:hover {
        text-decoration: underline;
    }
}
</style>
